<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-show="RevampModalObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改人员流动区域信息</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              所属省市：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.belongToArea" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              所属辖区：
            </div>
            <input type="text" v-model="stationName" placeholder="请选择所属单位" @click="getStationTree" readonly="readonly" class="modal-text f-l">
            <input v-model="AddData.stationId" type="hidden">
            <div class="sectionTree" v-show="sectionTreeIShow">
              <div id="PevampSectionTree" class="ztree sectionTree-box"></div>
            </div>
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              区域编码：
            </div>
            <input type="text" maxlength="10" placeholder="最长10个字符" v-model="AddData.areaId" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              区域名称：
            </div>
            <input type="text" maxlength="32" placeholder="最长32个字符" v-model="AddData.areaName" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              监控区域ID：
            </div>
            <input type="text" maxlength="8" placeholder="最长8个字符" v-model="AddData.geometryId" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              人力阈值：
            </div>
            <input type="text" v-model="AddData.threshold" class="modal-text f-l">
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "RevampPersonnelCtrlModal",
        props:["RevampModalObj","selectRow"],
        data(){
          return{
            AddData:{
              areaId:'', //区域编码
              areaName:'', //区域名称
              belongToArea:'', //所属省市
              geometryId:'', //监控区域ID
              threshold:'', //人力阈值
              stationId:'' //所属辖区
            },
            stationName:'',
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            treeNode:[],
            sectionTreeIShow:false,
            selectId:""
          }
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                this.selectId = this.selectRow;
                //console.log(this.selectRow);
                //加载部门结构树
                this.getStationTreeAjax();
              }
            },
            deep:true
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.AddData.stationid = treeNode.id;
              _this.stationName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          };

        },
        methods:{
          //加载部门结构树
          getStationTreeAjax(){
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                this.treeNode = data.data.data;
                $.fn.zTree.init($("#PevampSectionTree"), this.setting, this.treeNode);
                //加载详细信息
                this.getPersonnelData();
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //获取人员信息数据
          getPersonnelData(){
            this.$axios.get(this.DotCtrl+"/resource/addpersonStream/"+this.selectId)
              .then((data)=>{
                //console.log(data);
                let successData = data.data;
                for( let modalKey in this.AddData ){
                  for( let successKey in successData ){
                    if( modalKey === successKey ){
                      this.AddData[modalKey] = successData[successKey];
                    }
                  }
                }
                this.stationName = this.JPtool.queryStationName(this.AddData.stationId,this.treeNode);
                this.AddData.id = successData.id;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            //console.log(this.AddData);

            if( this.verifyForm.isNull(this.AddData.areaId) || this.verifyForm.letterAndNumber(this.AddData.areaId) ){
              this.s_alert("区域为空或格式不正确！只能为字母或数字！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.areaName) ){
              this.s_alert("区域名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.belongToArea) ){
              this.s_alert("所属省市不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.geometryId) ){
              this.s_alert("监控区域ID不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.threshold) || this.verifyForm.isNumber(this.AddData.threshold) ){
              this.s_alert("人力阈值为空或者不是整数！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.stationId) ){
              this.s_alert("所属辖区不能为空！");
              return false;
            }

            //console.log(this.AddData);
            //PUT /resource/addpersonStream/personstreamPoint/{id}
            this.$axios.put(this.DotCtrl+"/resource/addpersonStream/personstreamPoint/"+this.selectId,this.AddData)
              .then((data)=>{
                //console.log(data);
                this.s_alert("修改成功！");
                this.s_logwrite("资源信息管理-人员流动管理","修改人员流动");
                this.close();
              })
              .catch((err)=>{
                this.s_alert("修改失败！");
                //console.log(err);
              })
          },
          //展开部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
          },
          //关闭弹窗
          close(){
            this.$emit("RevampModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.AddData={
              areaId:'', //区域编码
              areaName:'', //区域名称
              belongToArea:'', //所属省市
              geometryId:'', //监控区域ID
              threshold:'', //人力阈值
              stationId:'' //所属辖区
            };
            this.stationName='';
          }
        }
    }
</script>

<style scoped>
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 80%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
